<template>
	<view>
		<view class="calendar">
			<view class="calendar-title">
				<view style="font-size: 38rpx;font-weight: bold;color: #ded9c9;">
					近期发售计划
				</view>
				<view>
					<button class="custom-style" shape="circle" text="分享" size="mini">分享</button>
				</view>
			</view>
			
			
			<view v-for="item in 2" style="margin-top: 30rpx;">
				<view class="calendar-card">
					<view style="height: 140rpx;">
						<view style="font-size: 36rpx;font-weight: bold;margin-left: 30rpx;padding-top: 20rpx;">01月23日</view>
						<view style="font-size: 24rpx;font-weight: bold;margin-left: 30rpx;padding-top: 15rpx;">12:00</view>
					</view>
					<view style="display: flex;justify-content: space-between;background-color: #2d2d2d;border-radius: 30rpx;align-items: center;">
						<view style="border-radius: 40rpx;overflow: hidden;width: 30%;">
							<image src="https://img.xieling.top/12.jpg" mode="widthFix" style="width: 200rpx;"></image>
						</view>
						<view style="width: 60%;display: flex;flex-direction:column ;justify-content: space-between;height: 180rpx;">
							<view style="font-size: 28rpx;font-weight: bold;">青海省博物馆·卧式羊型铜灯</view>
							<view class="crad-tip">
								<view class="tip-half">
									<text class="tip-half-neo">限量</text>
									<text class="tip-half-two">10000份</text>
								</view>
							</view>
							<view style="margin-bottom: 20rpx;">￥19.9</view>
						</view>
					</view>
				</view>
				
				
				<view v-for="(item,index) in 2">
					<view style="margin: 20rpx;font-weight: bold;">14:00</view>
					<view style="display: flex;justify-content: space-between;background-color: #2d2d2d;border-radius: 30rpx;align-items: center;">
						<view style="border-radius: 40rpx;overflow: hidden;width: 30%;">
							<image src="https://img.xieling.top/12.jpg" mode="widthFix" style="width: 200rpx;"></image>
						</view>
						<view style="width: 60%;display: flex;flex-direction:column ;justify-content: space-between;height: 180rpx;">
							<view style="font-size: 28rpx;font-weight: bold;">青海省博物馆·卧式羊型铜灯</view>
							<view class="crad-tip">
								<view class="tip-half">
									<text class="tip-half-neo">限量</text>
									<text class="tip-half-two">10000份</text>
								</view>
							</view>
							<view style="margin-bottom: 20rpx;">￥19.9</view>
						</view>
					</view>
					<view style="display: flex;justify-content: space-between;background-color: #2d2d2d;border-radius: 30rpx;align-items: center;margin-top: 30rpx;">
						<view style="border-radius: 40rpx;overflow: hidden;width: 30%;">
							<image src="https://img.xieling.top/12.jpg" mode="widthFix" style="width: 200rpx;"></image>
						</view>
						<view style="width: 60%;display: flex;flex-direction:column ;justify-content: space-between;height: 180rpx;">
							<view style="font-size: 28rpx;font-weight: bold;">青海省博物馆·卧式羊型铜灯</view>
							<view class="crad-tip">
								<view class="tip-half">
									<text class="tip-half-neo">限量</text>
									<text class="tip-half-two">10000份</text>
								</view>
							</view>
							<view style="margin-bottom: 20rpx;">￥19.9</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<u-loadmore :status="status" height="100rpx" loadmoreText="-更多内容敬请期待-"/>
	</view>
</template>

<script>
	export default {
		name: "calendar",
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.calendar-card{
		// height: 300rpx;
		background-color: #3c3f3d;
		border-radius: 40rpx;
	}
	.crad-tip{
		display: flex;
	}
	.calendar {
		width: 90%;
		margin: 0rpx auto;
		// margin-top: 44rpx;
		border-radius: 80rpx;
		padding-bottom: 50rpx;
	}

	.calendar-title {
		display: flex;
		justify-content: space-between;
	}

	.custom-style {
		background-color: #f2e0bc !important;
		color: #000;
		border-radius: 50rpx;
	}
	
	.tip-half{
		height: 30rpx;
		background-color: #f3e0bc;
		font-size: 18rpx;
		line-height: 30rpx;
		border-radius: 5rpx;
		
	}
	 .tip-half-neo{
		background-color: #f3e0bc;
		height: 30rpx;
		color: #2B2C2E;
		font-size: 18rpx;
		font-weight: 600;
		line-height: 30rpx;
		padding: 0rpx 10rpx;
		
		
	}
	 .tip-half-two{
		background-color: #4b4b4b;
		color: #dcd8bd;
		font-size:18rpx;
		line-height: 30rpx;
		height: 30rpx;
		padding: 6rpx 10rpx;
	}
</style>
